<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="static/layui-2.5.7/css/layui.css">
    <style rel="stylesheet">
        .w-100 {
            width: 100%;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="">
            <form class="layui-form" id="form2" lay-filter="form2">
                <div class="layui-form-item">
                    <button class="layui-btn" type="button" id="refresh">刷新文件缓存</button>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">所有文件</li>
                <li>...</li>

            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="w-100">
                        <form class="layui-form" id="form1" lay-filter="form1">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <input type="text" name="name" id="name" class="layui-input" value="drmc-ser"
                                           placeholder="文件名称">
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn" id="search" type="button">查询</button>
                                    <button class="layui-btn" id="start" type="button">启动</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="w-100">
                        <table id="table1" class="layui-table"></table>
                    </div>
                </div>
                <div class="layui-tab-item">
                    ...
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row"></div>
</div>
<script type="text/javascript" src="static/layui-2.5.7/layui.all.js"></script>
<script type="text/javascript">
    const $ = layui.$;
    const element = layui.element;
    const form = layui.form;
    const table = layui.table;
    const layer = layui.layer;

    const baseUrl = 'http://127.0.0.1:9090';

    let form1 = form.val("form1");

    const table1 = table.render({
        elem: '#table1',
        url: baseUrl + '/index/getAllFile',
        method: 'post',
        page: false,
        even: true,
        cols: [[
            {type: 'checkbox', title: ''},
            {type: 'numbers', title: '序号'},
            {field: 'name', title: '文件名', width: '40%'},
            {field: 'size', title: '大小（byte）', width: '15%'},
            {field: 'path', title: '绝对路径'},
        ]],
        where: form1
    });

    $("#refresh").click(function () {
        $.get({
            url: baseUrl + "/index/refreshFileList"
        });
    });

    function search() {
        form1 = form.val("form1");
        table1.reload({
            where: form1
        });
    }

    $("#search").click(search);

    $("#start").click(function () {
        const data = table.checkStatus('table1').data;
        if (data.length <= 0) {
            layer.msg("请选择至少一条数据！");
        }
        const objIds = [];
        for (const obj of data) {
            objIds.push(obj.objId);
        }
        console.log(objIds);
        $.post({
            url: baseUrl + "/index/fileStart",
            traditional: true,
            data: {
                objIds: objIds
            }
        });

    });

</script>
</body>
</html>
